<template>
  <view class="bg min100" style="padding-bottom: 118rpx">
    <view class="status_bar"></view>

    <view class="back">
      <image src="../../static/back.png" @click="handleBack"></image>
    </view>

    <view>
      <!-- 头部 -->
      <!-- <view class="topWrap white">
				<image :src="info.images" class="collectImg" mode="widthFix"></image>
				<view class="text-center">
					<view class="size-34">
						{{info.name}}
					</view>
				</view>
			</view> -->

      <!-- <view class="image-wrap"> -->
        <image :src="info.images" class="collectImg" mode="aspectFill"></image>
      <!-- </view> -->

      <view class="topWrap white">
      	<view class="plr-20 mt-30">
      		<view class="size-36">
      			{{info.name}}
      		</view>
      		<view class="size-50 bold mb-30 gold mt-10">
      			￥{{info.price}}
      		</view>
      	</view>
      </view>

      <!-- 介绍 -->
      <!-- <view class="radius-20 bg-1 mt-30 plr-30 ptb-30">
        <view class="">
          <view class="gray-2 size-22"> 您可能抽到以下藏品中的1个 </view>
        </view>
        <empty v-if="info.goods.length == 0"></empty>
        <view class="" v-else>
          <view class="flex gray-2 ptb-20 flex-between" style="border-bottom: 1rpx solid #515151" v-for="(item, index) in info.goods" :key="index">
            <view class="flex">
              <image style="width: 70rpx; height: 70rpx; border-radius: 50%" :src="item.image" mode="aspectFill"> </image>
              <view class="ml-20">
                <view class="mb-20 bold white">
                  {{ item.name }}
                </view>
                <view>
                  价值：<text class="red">￥{{ item.price }}</text>
                </view>
              </view>
            </view>
            <view class=""> 概率：{{ item.rate }}% </view>
          </view>
        </view>
      </view> -->
      <!-- 介绍 -->
      <view class="mt-30 plr-20 ptb-30" v-if="info.content">
        <view class="size-32 white"> 作品故事 </view>
        <view class="white infoWrap mt-30" v-if="isShow" v-html="info.content"> </view>
      </view>
			<view class="plr-20">
				<copyright></copyright>
			</view>
    </view>
    <view class="btmWrap flex flex-between flex-middle plr-30">
      <view class="flex flex-center">
				<text class="gold size-50 bold">￥{{ info.price }}</text>
				<!-- <text class="" style="color: #ED1C1C;margin-left: 20px;font-size: 24rpx;" @click="gorecharge" v-if="Number(info.price) > walletAccount">余额不足，请充值</text> -->
			</view>
      <view class="">
        <button class="mtb-30 buyBtn" hover-class="none" @click="toBuy" :disabled="btnDisabled" v-if="info.status == 1">立即购买</button>
        <view class="itemTips radius-40 plr-40 ptb-12" v-if="info.status == 2">
          {{ info.status_text }}
        </view>

        <!-- <view class="radius-40 plr-40 ptb-8 text-center" v-if="info.status==3"
					style="color:#9fc58c;background:#161912;">
					<view class="">
						{{info.status_text}}
					</view>
					<view class="mt-10">
						{{info.status_time_text}}
					</view>
				</view> -->

        <view class="button bg-gold color-1a" v-if="info.status == 3">
          <view class="">
            {{ info.status_text }}
          </view>
          <view class="">
            {{ info.status_time_text }}
          </view>
        </view>

        <view class="itemTips radius-40 plr-40 text-center ptb-12" v-if="info.status == 4">
          <view class="">
            {{ info.status_text }}
          </view>
          <u-count-down
            :timestamp="info.diff_time"
            bg-color="background:transparent"
            color="#333"
            font-size="24"
            separator-color="#333"
            style="margin-left: 5rpx"
          ></u-count-down>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import copyright from '@/components/Copyright.vue'
import empty from '../../components/empty.vue'
export default {
  components: {
    empty,
		copyright
  },
  data() {
    return {
      btnDisabled: false,
      id: '',
      info: {
        goods: [],
      },
			walletAccount:0,
			isShow:false,//
    }
  },
  onLoad(options) {
    this.id = options.id
    
  },
	onShow() {
		this.$http('api/box/boxDetail', {
		  id: this.id,
		}).then(res => {
		  this.info = res
			this.getAccount()
		})
	},
	onPageScroll ({scrollTop}) {
		if (scrollTop > 100) {
			this.isShow = true
		}
	},
	onPullDownRefresh() {
		this.isShow = true
		uni.stopPullDownRefresh()
	},
  methods: {
		gorecharge () {
			uni.navigateTo({
				url:'/pages/my/recharge'
			})
		},
		//获取余额
		getAccount () {
			this.$http('api/account/account').then(res => {
				this.walletAccount = res.account;
			}).catch(err=>{
				console.log(err);
			})
		},
    handleBack() {
      if (getCurrentPages().length === 1) {
        uni.switchTab({
          url: '/pages/home/index',
        })
      } else {
        uni.navigateBack()
      }
    },
    // 购买
    toBuy() {
			
      this.btnDisabled = true
      this.$http('api/orders/boxApply', {
        id: this.id,
      }).then(res => {
        this.btnDisabled = false
        uni.navigateTo({
          url: '../pay/boxPay?order_id=' + res.order_id,
        })
      }).catch(res=>{
				 this.btnDisabled = false
				uni.showToast({
					title:res,
					icon:'none'
				})
			})
    },
  },
}
</script>

<style lang="less" scoped>
page{
	background: #f5f5f5;
}
.white {
  color: #3c3c3c;
}
.gold {
  color: #9c8b66;
}
.back {
  position: relative;
  height: 0;
  image {
    position: absolute;
    width: 20rpx;
    height: 36rpx;
    top: 30rpx;
    left: 30rpx;
	z-index: 99;
  }
}

.userImg {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.btmWrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  background: #fff;
  height: 118rpx;
  box-sizing: border-box;
  .button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 78rpx;
    border-radius: 39rpx;
    font-size: 24rpx;
    line-height: 78rpx;
  }
}
.buyBtn {
  width: 240rpx;
  height: 78rpx;
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 30rpx;
	text-align: center;
	line-height: 78rpx;
  background: linear-gradient(90deg, #EEA634, #DE2D32);
  border-radius: 39rpx;
}

.tipsLeft {
  background: #efaa1c;
  color: #2f2f2e;
}

.collectImg {
	width: 100%;
	height: 450rpx;
}

.infoWrap {
  /deep/ img {
    width: 100% !important;
    height: auto;
  }
}

.itemTips {
  font-size: 28rpx;
  background: #21263d95 !important;
  border-radius: 40rpx;
  color: #fff;
}
</style>
